<template>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <el-button type="primary" @click="jumpChildOne">算例评估</el-button>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <el-button type="primary" @click="jumpChildTwo">策略种群</el-button>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
           <el-button type="primary" @click="jumpChildThree">决策统计信息</el-button>
        </el-card>
      </el-col>
    </el-row>
    
      <router-view ></router-view>
    
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref,watch,onMounted,onBeforeMount } from "vue";
import {onBeforeRouteUpdate, useRouter,useRoute} from 'vue-router'

 const router = useRouter()
 const route = useRoute()
onMounted(()=> {
   router.push('/effect/optimaze-ctrl/optimaze-child1')
}
)

// 监听路由变化
watch(
  () => route.path,
  (newPath, oldPath) => {
    // console.log('路由变化了，新的路径是：', newPath);
    // console.log('路由变化了，旧的路径是：', oldPath);
    if(newPath==='/effect/optimaze-ctrl'){
      router.push('/effect/optimaze-ctrl/optimaze-child1')
    }
    
  },
  { immediate: true } // 立即执行监听函数
);

function jumpChildOne(){
    router.push('/effect/optimaze-ctrl/optimaze-child1')
}

function jumpChildTwo(){
    router.push('/effect/optimaze-ctrl/optimaze-child2')
}

function jumpChildThree(){
    router.push('/effect/optimaze-ctrl/optimaze-child3')
}


</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 0px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  border-radius: 0;
}
 

</style>